<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.min.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.default.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page login-page">
      <div class="container">
        <div class="form-outer text-center d-flex align-items-center">
          <div class="form-inner">
            <div class="logo text-uppercase"><span>Bootstrap</span><strong class="text-primary">Dashboard</strong></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            <form method="post" th:action="@{/login}" class="text-left form-validate">
              <div class="form-group row mt-4">
              <div class="col-sm-10">
                <input id="login-username" type="text" name="username" required data-msg="Please enter your username"
                       th:class="|input-material ${usernameMsg!=null?'is-invalid':''}|"
                       th:value="${param.username}">
                <label for="login-username" class="label-material">Username</label>
              </div>
              </div>
              <div class="form-group row mt-4">
              <div class="col-sm-10">
                <input id="login-password" type="password" name="password" required data-msg="Please enter your password"
                       th:class="|input-material ${passwordMsg!=null?'is-invalid':''}|"
                       th:value="${param.password}"
                       >
                <label for="login-password" class="label-material">Password</label>
              </div>
              </div>

              <div class="form-group row mt-4">
                <div class="col-sm-6">
                <input id="verifycode" type="text" name="code" required data-msg="Please enter your verifycode"
                       th:class="|input-material ${codeMsg!=null?'is-invalid':''}|">
                <label for="verifycode" class="label-material">Verification code</label>
              </div>

                <div class="col-sm-4">
                  <a href="javascript:refresh_kaptcha();"><img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/></a>

                </div>
              </div>

              <div class="form-group row mt-4">
                <div class="col-sm-2"></div>
                <div class="col-sm-10">
                  <input type="checkbox" id="remember-me" name="rememberme"
                         th:checked="${param.rememberme}">
                  <label class="form-check-label" for="remember-me">记住我</label>
                  <input id="login" type="submit" value="Login" class="btn btn-primary">
                </div>
              </div>


                <!-- This should be submit button but I replaced it with <a> for demo purposes-->



            </form><a  class="forgot-pass">Forgot Password?</a><small>Do not have an account? </small><a th:href="@{/register}" class="signup">Signup</a>
          </div>
          <div class="copyrights text-center">
            
            
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/popper.js/umd/popper.min.js}"> </script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
    <script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"> </script>
    <script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
    <script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
    <script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
    <!-- Main File-->
    <script th:src="@{/js/front.js}"></script>
    <script th:src="@{/js/global.js}"></script>
    <script>
      function refresh_kaptcha() {
        var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
      }
    </script>
  </body>
</html>